import { updateUserProfile, uploadAvatar } from '@/services/system/user';
import { ProForm, ProFormText, ProFormUploadButton } from '@ant-design/pro-components';
import { Form, message, Row } from 'antd';
import React from 'react';

export type SettleInfoProps = {
  values: Partial<API.CurrentUser> | undefined;
};

const SettleInfo: React.FC<SettleInfoProps> = (props) => {
  const handleFinish = async (values: Record<string, any>) => {
    const data = { ...props.values, ...values } as API.CurrentUser;

    console.log(JSON.stringify({ ...values }));
    return;
    const resp = await updateUserProfile(data);
    if (resp.code === 200) {
      message.success('修改成功');
    } else {
      message.warning(resp.msg);
    }
  };
  const form = Form.useForm()[0];
  const BaseTextInput: React.FC<TextInputProps> = ({ name, label, required = false, ...rest }) => {
    const rules = [
      required ? { required: true, message: `请输入${label}！` } : null,
      ...(rest.rules || []),
    ];
    return (
      <ProFormText
        name={name}
        label={label}
        width="xl"
        placeholder={`请输入${label}`}
        rules={rules}
        {...rest} // 将其他属性传递给 ProFormText
      />
    );
  };

  // const handleImageSelect = (event, fieldName) => {
  //     const file = event.target.files[0];
  //     if (file) {
  //     handleImageUpload(file, fieldName)
  //     .then((imageUrl) => {
  //     form.setFieldsValue({ [fieldName]: imageUrl }); // 更新对应字段的值
  //     })
  //     .catch((error) => {
  //     console.error('上传失败:', error);
  //     });
  //     }
  //  };
  return (
    <>
      <ProForm form={form} onFinish={handleFinish} initialValues={props.values}>
        <div class="labTitle">企业信息（必填项） </div>

        <Row>
          <BaseTextInput name="businessName" label="企业全称" required />
        </Row>
        <Row>
          <BaseTextInput name="businessNo" label="营业执照号" required />
        </Row>
        <Row>
          <BaseTextInput name="businessAddress" label="企业地址" required />
        </Row>

        {/* 图片上传有问题 */}
        <ProFormUploadButton
          name="xxxxxx"
          label="营业执照"
          max={1}
          fieldProps={{
            name: 'file',
            listType: 'picture-card',
            multiple: true,
            maxCount: 1,
            accept: '.png, .jpg, .jpeg',
            customRequest: (options) => {
              const { onSuccess, onError, file } = options;
              var formData = new FormData();
              formData.append('avatarfile', file);
              // /upload为图片上传的地址，后台只需要一个图片的path
              // name，path，status是组件上传需要的格式需要自己去拼接
              uploadAvatar(formData).then((res) => {
                if (res.code === 200) {
                  options.onSuccess(res.imgUrl, res.imgUrl);
                  //   message.success(res.msg);
                  //   props.onFinished(true);
                } else {
                  message.warning(res.msg);
                }
              });
            },
          }}
          rules={[{ required: true }]}
          title="上传"
          //   onChange={(event) => handleImageSelect(event, 'imageUrl')} // 添加 onChange 事件处理函数，并传递字段名称

          // action="/upload.do"
          extra=" 图片支持PNG、JPG、JPEG格式，大小不超过5MB，宽高比例为1:1"
        />

        {/* <Row><BaseTextInput name="imageUrl" label="营业执照" required /></Row> */}
        <Row>
          <BaseTextInput name="legalEmail" label="邮箱" required />
        </Row>
        <Row>
          <BaseTextInput name="legalName" label="法人姓名" required />
        </Row>
        {/* <Row><BaseTextInput name="imageUrl2" label="法人身份证" required /></Row> */}
        <Row>
          <BaseTextInput name="personName" label="联系人姓名" required />
        </Row>
        <Row>
          <BaseTextInput name="personEmail" label="联系人邮箱" required />
        </Row>
        <Row>
          <BaseTextInput name="phone" label="联系人手机(+86)" required />
        </Row>
        <Row>
          <BaseTextInput name="checkCode" label="验证码" required />
        </Row>

        <div class="labTitle">银行信息（选填项） </div>

        <Row>
          <BaseTextInput name="bankCard" label="请填写公司对公账号"  />
        </Row>
        <Row>
          <BaseTextInput name="bank" label="开户银行"  />
        </Row>
        <Row>
          <BaseTextInput name="branch" label="开户支行"  />
        </Row>
      </ProForm>
    </>
  );
};

export default SettleInfo;
